<template>
  <div class="space-y-1">
    <Route :icon="Home" :selected="true" title="Dashboard" />
    <Route :icon="Users" :selected="false" title="Team" />
    <Route :icon="Paperclip" :selected="false" title="Invoices" />
    <Route :icon="Link" :selected="false" title="Integrations" />
    <Route :icon="DollarSign" :selected="false" title="Finance" />
  </div>
</template>

<script setup lang="ts">
import { defineComponent, FunctionalComponent, h } from 'vue';
import { Home, Users, Paperclip, Link, DollarSign } from 'lucide-vue-next';

// Define the Route component locally or import it if it becomes complex
const Route: FunctionalComponent<{
  selected: boolean;
  icon: FunctionalComponent;
  title: string;
}> = (props) => {
  return h(
    'button',
    {
      class: [
        'flex items-center justify-start gap-2 w-full rounded px-2 py-1.5 text-sm transition-[box-shadow,_background-color,_color]',
        props.selected
          ? 'bg-white text-stone-950 shadow'
          : 'hover:bg-stone-200 bg-transparent text-stone-500 shadow-none'
      ]
    },
    [
      h(props.icon, { class: props.selected ? 'text-violet-500' : '', size: 16 }), // Render the icon component
      h('span', props.title)
    ]
  );
};

</script>

<style scoped>
/* Styles for RouteSelect */
</style>